

<template>
    <view class="groupMembers" bgImg="f5">
        <!-- <image
            class="psa"
            style="width:750rpx;height:834rpx;top:0;left:0;right:0;z-index:1;"
            src="../../static/bg1.jpg"
            mode=""
        ></image> -->
        <view
            style="background: #fff;position:fixed;z-index:100;width:750rpx;"
            :style="{ height: systemInfo.statusBarHeight + 'px' }"
        ></view>
        <view
            class="slim_header d-flex a-center j-center"
            style="border-bottom:none;position:fixed;z-index:100;"
            :style="{ top: systemInfo.statusBarHeight + 'px' }"
        >
            <view class="left_box" @tap="goBack">
                <image src="/static/center/back.png" class="back"></image>
            </view>
            <view class="title d-flex a-center j-between">群信息</view>
            <view class="right_box">
                <!-- <image src="/static/center/dian.png" class="dian"></image> -->
            </view>
        </view>
        <scroll-view :scroll-y="true"
            class="content"
            :style="{ top: `calc(100rpx + ${systemInfo.statusBarHeight}px)` }"
        >
            <view class="psr" style="width:750rpx;" :style="{minHeight:minHeight1+'px'}" >
                <view id="contentHeight" class="height_box">
                <view class="box2">
                    <view class="title2 d-flex a-center">
                        <view class="dot"></view>
                        基础信息
                    </view>

                    <view class="head d-flex a-center">
                        <cacheimg
                            class="head_img"
                            :saveKey="groupDetail.groupId"
                            :src="groupDetail.photo"
                            mode="aspectFill"
                        ></cacheimg>
                        <text class="text">{{groupDetail.name}}</text>
                    </view>

                    <view class="row d-flex a-center">
                        <view class="desp d-flex j-between">
                            <text>成</text>
                            <text>员:</text>
                        </view>
                        <view>
                            <text class="text_main">{{
                                    groupDetail.currentUserCount
                                }}</text>
                            <text style="font-size:30rpx;">/{{ groupDetail.maxUserCount }}</text>
                        </view>
                    </view>
					<!--
                    <view class="row d-flex a-center">
                        <view class="desp d-flex j-between">
                            <text>入</text>
                            <text>群</text>
                            <text>费:</text>
                        </view>
                        <view class="text_main">{{
                                groupDetail.payAmount
                                    ? `¥${centToYuan(groupDetail.payAmount)}`
                                    : "免费"
                            }}</view>
                    </view>
					-->
                </view>

                <view class="box2 psr">

                    <view class="jiaobiao" :class="[shadowClass]">
                                <i class="icon" :class="[getClass]"></i>
                                <!-- <view class="bg" :class="[shadowClass(circle)]"></view> -->
                                <text class="text">{{ jiaobiaoText }}</text>
                            </view>

                    <view class="title2 d-flex a-center">
                        <view class="dot"></view>
                        群主服务
                    </view>


                    <view class="content3">


                            <view
                                class="service d-flex wrap"
                                style="margin-top: 20rpx"
                            >
                                <view
                                    class="card d-flex d-c j-center a-center checked"
                                    v-for="(
                                        item, index
                                    ) in groupDetail.userGroupItemss"
                                    @tap="selectService(item)"
                                >
                                    <view
                                        class="rect d-flex a-center j-center"
                                        :class="{
                                            newService: !baseService.includes(
                                                item.photo
                                            ),
                                        }"
                                    >
                                        <image
                                            class="img"
                                            :src="`/static/createCircle/${item.photo}-w.png`"
                                        ></image>
                                    </view>
                                    <view
                                        :class="{
                                            newServiceText: !baseService.includes(
                                                item.photo
                                            ),
                                        }"
                                        class="text psr"
                                    >
                                        {{ item.title }}
                                    </view>
                                </view>
                            </view>

                            <view
                                class="title2 d-flex a-center"
                            >
                                <view class="dot"></view>
                                群主说
                            </view>

                            <view class="rich_box">
                                <rich-text
                                    :nodes="groupDetail.introduction2"
                                ></rich-text>
                            </view>
                        </view>


                </view>
                </view>
                <view class="btn_main_box">
                    <view
                        class="btn_main"
                        v-if="isOwner"
                        @tap="editGroup"
                    >
                        <text class="quit">编辑</text>
                    </view>

                    <view class="heightBox"></view>

                </view>
            </view>
        </scroll-view>

        <uni-popup
            ref="servicePopup"
            :safe-area="false"
            type="bottom"
            background-color="transpartent"
        >
            <view
                class="servicePopup"
                :class="{ newService: showServiceisNew }"
            >
                <view class="shadow"></view>
                <view class="shadow1"></view>
                <view class="content2">
                    <view class="title d-flex a-center j-center">
                        <view class="text">{{ currentShowService.title }}</view>
                        <view
                            class="close psa h-center"
                            @tap="servicePopup.close()"
                        >
                            <image
                                class="img"
                                src="/static/image/close.png"
                                mode=""
                            />
                        </view>
                    </view>
                    <view
                        class="row1 d-flex"
                        v-for="(item, index) in currentShowService.detailArr"
                    >
                        <view class="index d-flex a-center j-center">{{
                            index + 1
                        }}</view>
                        <view class="text">{{ item }}</view>
                    </view>
                    <view class="heightBox"></view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script setup lang="ts">
import { ref,computed,reactive } from "vue";
import { onReady, onShow, onLoad,onUnload } from "@dcloudio/uni-app";
import { userData as userDataStore } from "@/store/userData";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
import { groupUpdate } from "@/api/api";
import { config as configStore } from "@/store/config";
import { getCircleDetail} from "@/api/api";
import cacheimg from "@/components/cacheimg.vue";
import { systemConfig as systemConfigStore } from "@/store/systemConfig";
import { centToYuan } from "@/utils/format";

const systemConfig: any = systemConfigStore();

const baseService: any = ref(["10000", "10001", "10002", "10003"]);

const showServiceisNew = computed(()=>{
    return !baseService.value.includes(
        currentShowService.value.photo
    )
})


const editGroup = () => {
    uni.navigateTo({
        url: `/pages/quanzi/createCircle?groupId=${groupId.value}`,
    });
};

const groupId = ref('')

const groupDetail = ref({});

const goBack = () => {
    uni.navigateBack();
};


const userData: any = userDataStore();

const systemInfo: any = systemInfoStore();


const isOwner = ref(false);

const getDetail = async (groupId: string) => {
    const res: any = await getCircleDetail({ groupId });
    const { flag, data } = res;
    console.log("getDetail");
    console.log(res);
    if (flag !== 1) {
        uni.showToast({
            icon: "none",
            title: "获取群资料失败",
            duration: 1500,
        });
        return;
    }

    data.introduction = data.introduction.replace(/\n/g, " <br/>");
    data.introduction2 = data.introduction2.replace(/\n/g, "<br/>");

    groupDetail.value = data;
};

const servicePopup = ref(null);

const currentShowService = ref({});


const selectService = (service) => {
    const arr = service.detail.split("&*&*&");
    currentShowService.value = service;
    currentShowService.value.detailArr = arr;
    servicePopup.value.open();
};

const shadowClass = computed(() => {
    if (!groupDetail.value) {
        return "";
    }

    if (!groupDetail.value.label) {
        return "";
    }

    if (!groupDetail.value.label) {
        return "";
    }

    if (!systemConfig.groupTag) {
        return "";
    }

    if (!systemConfig.groupTag.length) {
        return "";
    }

    if (groupDetail.value.label === systemConfig.groupTag[0].slimKey) {
        return "shadow0";
    }

    if (groupDetail.value.label === systemConfig.groupTag[1].slimKey) {
        return "shadow1";
    }

    if (groupDetail.value.label === systemConfig.groupTag[2].slimKey) {
        return "shadow2";
    }

    if (groupDetail.value.label === systemConfig.groupTag[3].slimKey) {
        return "shadow3";
    }

    if (groupDetail.value.label === systemConfig.groupTag[4].slimKey) {
        return "shadow4";
    }
});

const getClass = computed(() => {
    if (groupDetail.value.label == 1) {
        return "icon-jianzhongshoushen";
    }
    if (groupDetail.value.label == 2) {
        return "icon-jianzhizengji";
    }
    if (groupDetail.value.label == 3) {
        return "icon-yundongjiankang";
    }
    if (groupDetail.value.label == 4) {
        return "icon-jiankangyinshi";
    }
    if (groupDetail.value.label == 5) {
        return "icon-xiuxianyangsheng";
    }
});


const jiaobiaoText = computed(() => {
    let str = "";
    systemConfig.groupTag.forEach((item) => {
        if (item.slimKey === groupDetail.value.label) {
            str = item.slimValue;
        }
    });

    return str;
});


const contentHeight = ref(0);

const getContentHeight = () => {
    try {
        uni.createSelectorQuery()
            .select("#contentHeight")
            .boundingClientRect((data) => {
                if (!data || !data.height) {
                    setTimeout(() => {
                        getContentHeight();
                    }, 50);

                    return;
                }

                contentHeight.value = data.height;
            })
            .exec();
    } catch (error) {
        setTimeout(() => {
            getContentHeight();
        }, 50);
    }
};


const minHeight1 = computed(() => {
    let num =
        systemInfo.windowHeight -
        systemInfo.statusBarHeight-uni.upx2px(100);


    if (num > (contentHeight.value+uni.upx2px(150)+systemInfo.safeAreaInsets?.bottom)) {
        return num;
    } else {
        return contentHeight.value+uni.upx2px(150)+systemInfo.safeAreaInsets?.bottom;
    }
});





onReady(() => {});
onShow(() => {
    getDetail(groupId.value)
    getContentHeight();
});

onLoad((option: any) => {
    if (option.groupID) {
        groupId.value = option.groupID;
        isOwner.value = option.isOwner==='true';
    }
    uni.getSystemInfo({
        success(result) {
            systemInfo.setSystemInfo(result);
        },
    });
});

onUnload(() => {});

</script>

<style lang="scss" scoped>

.jiaobiao {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 160rpx;
    height: 40rpx;
    border-top-left-radius: 0;
    border-top-right-radius: 20rpx;
    border-bottom-left-radius: 20rpx;
    overflow: hidden;
    z-index: 5;

    &.shadow0 {
        background: #1dc691;
    }
    &.shadow1 {
        background: #ff9f26;
    }
    &.shadow2 {
        background: #905ade;
    }
    &.shadow3 {
        background: #4c7dfe;
    }
    &.shadow4 {
        background: #AD3569;
    }
    .icon {
        color: #fff;
        font-size: 20rpx;
        margin-right: 5rpx;
    }

    .text {
        z-index: 10;
        font-size: 20rpx;
        color: #fff;
    }
}

.servicePopup {
    position: relative;
    width: 750rpx;
    overflow: hidden;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    overflow: hidden;
    background: #fff;
    min-height:700rpx;
    .heightBox{
        width:750rpx;
        min-height:20rpx;
        height: constant(safe-area-inset-bottom);
        height: env(safe-area-inset-bottom);
    }

    &.newService {
        .shadow {
            background: linear-gradient(
                27deg,
                #fce2d6 0%,
                #fff5e9 59%,
                #fddec0 100%
            );
        }

        .content {
            .title {
                .left_btn {
                    color: #f19945;
                }
                .close {
                }
            }
            .row1 {
                .index {
                    background: #f19945;
                }
            }

            .sbtn1 {
                background: linear-gradient(318deg, #ffaf67 0%, #e48e41 100%);
            }

            .sbtn2 {
                color: #f19945;
                border: 2rpx solid #ffaf67;
            }
        }
    }

    .shadow {
        position: absolute;
        top: 0;
        left: 0;
        width: 750rpx;
        bottom:0;
        background: linear-gradient(
            27deg,
            #d6f6fc 0%,
            #eafce1 59%,
            #b2facd 100%
        );
    }
    .shadow1 {
        position: absolute;
        top: 155rpx;
        left: 0;
        width: 750rpx;
        bottom:0;
        background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 1)
        );
    }
    .content2 {
        position: relative;
        z-index: 10;
        width: 750rpx;
        padding-top: 40rpx;
        .title {
            position: relative;
            width: 750rpx;
            height: 50rpx;
            padding: 0 40rpx;
            margin-bottom: 70rpx;
            .left_btn {
                font-size: 30rpx;
                font-weight: 400;
                color: #1dc691;
                left: 40rpx;
            }
            .close {
                right: 40rpx;
            }
            .text {
                font-size: 34rpx;
                font-weight: 600;
                color: #333333;
            }

            .img {
                width: 36rpx;
                height: 36rpx;
            }
        }

        .row1 {
            width: 750rpx;
            padding: 0 50rpx;
            margin-bottom: 44rpx;
            .index {
                width: 48rpx;
                height: 48rpx;
                border-radius: 24rpx;
                background: #1dc691;
                color: #fff;
                font-weight: 600;
                font-size: 28rpx;
                font-family: 'din',DINAlternate-Bold, DINAlternate;
            }
            .text {
                width: 570rpx;
                margin-left: 20rpx;
                font-size: 28rpx;
                color: #333;
                line-height: 40rpx;
            }
        }

        .sbtn {
            width: 690rpx;
            height: 80rpx;
            margin: 0 auto;
            border-radius: 20rpx;
            font-size: 32rpx;
            font-weight: 600;
        }

        .sbtn1 {
            background: linear-gradient(318deg, #64f1c5 0%, #29dba3 100%);
            color: #fff;
            margin-bottom: 20rpx;
        }
        .sbtn2 {
            border: 2rpx solid #1dc691;
            color: #1dc691;
            margin-bottom: 20rpx;
        }
    }
}


.groupMembers{
    .btn_main_box{
        position: absolute;
        left:30rpx;
        bottom:0;
        .heightBox{
            width:690rpx;
            min-height:20rpx;
            height: constant(safe-area-inset-bottom);
            height: env(safe-area-inset-bottom);
        }
    }
    .btn_main {
        z-index:100;
        left: 30rpx;
        width: 690rpx;
        height: 80rpx;
        border-radius: 10rpx;
        border: 2rpx solid #1dc691;
        display: flex;
        align-items: center;
        justify-content: center;


        &:active {
            opacity: 0.7;
        }
        .quit {
            font-size: 32rpx;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #1dc691;
        }
    }

    .content{
        position:absolute;
        width:750rpx;
        left:0;
        right:0;
        .height_box{
            padding-top:20rpx;
        }
        .box2 {
            width: 710rpx;
            padding: 25rpx;
            background: #fff;
            border-radius: 20rpx;
            margin: 0 auto;
            margin-bottom:20rpx;
            .title2 {
                height: 48rpx;
                font-size: 34rpx;
                font-weight: 600;
                color: #333333;
                margin-bottom:20rpx;
                .dot {
                    width: 6rpx;
                    height: 30rpx;
                    background: #1dc691;
                    border-radius: 3rpx;
                    margin-right: 10rpx;
                }
            }
            .row{
                height:50rpx;
                .desp{
                    width:105rpx;
                    color:#333;
                    font-size:30rpx;
                    margin-right:20rpx;
                }
                .text_main{
                    font-size:30rpx;
                    font-weight:600;
                }
            }

            .rich_box{
                margin-top:20rpx;
                margin-bottom:30rpx;
                font-size:28rpx;
                min-height:100rpx;
            }
            
        }

        .service {
        width: 100%;
        padding-bottom: 20rpx;
        gap: 20rpx;

        .card {
            position: relative;
            width: 150rpx;
            &.checked {
                .rect {
                    background: url("/static/createCircle/bg2.png") no-repeat;
                    background-size: 100% 100%;

                    &.newService {
                        background: url("/static/createCircle/bg3.png")
                            no-repeat;
                        background-size: 100% 100%;
                    }
                }
            }

            .rect {
                width: 150rpx;
                height: 150rpx;
                border-radius: 10rpx;
                background: rgba(35, 226, 166, 0.1);
                &.newService {
                    background: rgba(226, 123, 35, 0.1);
                }
                &.add {
                    background: rgba(226, 123, 35, 0.1);
                }

                .img {
                    width: 100%;
                    height: 100%;
                }
            }

            .text {
                width: 100%;
                height: 35rpx;
                margin-top: 5rpx;
                font-size: 24rpx;
                color: #666;
                text-align: center;
                height: 70rpx;
                // overflow: hidden;
                // text-overflow: ellipsis;
                // white-space: nowrap;
                // lines:2;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                overflow: hidden;
                -webkit-line-clamp: 2;
                &.newServiceText {
                    height: 70rpx;
                }
            }
        }
    }

        .head{
            width:100%;
            height:100rpx;
            gap:20rpx;
            margin-bottom:20rpx;
            .head_img{
                width:100rpx;
                height:100rpx;
                border-radius: 50rpx;
                border:3rpx solid #fff;
                box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.1);
            }
            .text{
                font-size:30rpx;
                font-weight:600;
                color:#333;
            }
        }
    }

}
</style>
